<template>
    <fieldset>
        <legend>Product</legend>
        <h1>商品列表Product</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                名称：<span>{{ item.title }}</span>
                价格：<span>{{item.price}}</span>
                数量：<span>{{item.inventory}}</span>
                <button @click="addCart(item)" :disabled="item.inventory===0">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>

<script setup>
import { useProduct} from "../../store/products"
import { useCart} from "../../store/cart"
import {storeToRefs} from "pinia"

let useStore = useProduct()
let useStore1 = useCart()
useStore.fetch_data()
let { products }= storeToRefs(useStore)

let addCart=(it)=>{
    console.log(787897);
    useStore1.add_product(it)
    it.inventory--
}
</script >

<style lang="scss">
span{
    margin-right: 80px;
}
li{
    margin-bottom: 20px;
}

</style>